<template>
	<view class="addrecord_deta"> 

		<view class="add_rec" @click="goToNewPage">
			<view class="rec_top">
				<text></text>
				<text>尿酸值</text>
				<text></text>
			</view>
			<view class="rec_con">
				<text v-if="info.value">{{info.value}}</text>
			</view>
			<view class="rec_con_dw">
				umol/L
			</view>
			<view class="rec_con_bc">
				滑动标尺记录尿酸值
			</view>
		</view>
		<view class="ruler" @click="goToStatis">
			<scroll-choose 
				@scroll="scroll" 
				:scrollStart="scrollStart" 
				:scrollEnd="scrollEnd" 
				:scrollLeft="scrollLeft" 
				:maginL="maginL" 
				></scroll-choose> 
			<view class="is_scroll"> 
			</view>
		</view>

		<!-- 测量时间 -->
		<view class="measuring_time">
			<view class="measuring_fl">测量时间</view>
			<view class="measuring_fr">
				<text>{{info.time}}</text>
				<!-- <image class="measuring_fr_img" :src="require('../../../status/image/arr.png')" mode=""></image> -->
			</view>
		</view>
		 
<!-- 时间段 -->
		<view class="blood_time">
			<view class="blood_time_item" @click="changeItem(index+1)" :class="index+1 == info.timeType? 'current_blood_item':''"
			 v-for="(item,index) in bloodTimeList" :key="index">{{item}}</view>
		</view>

		<!-- 状态 -->
		<view class="blood_state">
			<view class="blood_state_item" v-for="(v,i) in bloodStateList" :key="i" @click="changeBlood(v.type)">
				<image :src="v.img" mode=""></image>
				<text :class="info.type == v.type? 'current_blood_state':''">{{v.text}}</text>
			</view>
		</view>
		 <image class="rec_img" v-show="info.img" :src="info.img" mode=""></image>
		 <view class="addrecord_btn">
			 <text @click="deleteAddrecord">删除</text> 
		 </view>
		 
		 <!-- 时间选择 -->
		 <!-- <u-picker v-model="showTime" mode="time" @confirm="columnchange"></u-picker> -->
	</view>
</template>

<script>
	import scrollChoose from '@/components/scroll-choose/scroll-choose.vue'
	export default {
		 components:{
		        scrollChoose,
		    },
		data() {
			return { 
				// 痛风发作情况
				goutList: [
					{img: require('../../status/image/sorry.png'),text1:'未发作',text2:'感觉不错',type:1},
					{img: require('../../status/image/sorry.png'),text1:'轻度疼痛',text2:'不影响生活',type:2},
					{img: require('../../status/image/sorry.png'),text1:'中度疼痛',text2:'影响生活',type:3},
					{img: require('../../status/image/sorry.png'),text1:'重度疼痛',text2:'卧床不起',type:4}, 
					], 
				 
				// 当前选中痛风发作情况
				currentStatusItem: -1, 
				info:{},
				// 当前尿酸id
				id: null, 
				// 发作情况
				type: null,  
				// 类型
				timeType: '',
				  scrollLeftNow: 62,//页面显示
				  scrollLeft: 420,//初始值
				  scrollStart: 0,//滚动区域起始值
				  scrollEnd: 1500,//滚动区域终止值
				  maginL: 10,//线间距 
				  // 是否显示时间
				  showTime: false,
				  // 添加/删除完成后跳转上一页
				  goToPreviousTime: null,
					// 时间段选择
					bloodTimeList: ['空腹', '午餐前', '晚餐前', '睡前', '早餐后', '午餐后', '晚餐后', '凌晨'],
					// 当前时间段高亮
					currentBloodIndex: -1,
					// 状态
					bloodStateList: [{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/0.png',
							text: '无不适',
							type: 1
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/8.png',
							text: '三多',
							type: 2
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/3.png',
							text: '乏力',
							type: 3
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/7.png',
							text: '呕吐',
							type: 4
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/4.png',
							text: '呼吸快',
							type: 5
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/12.png',
							text: '眼下陷',
							type: 6
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/9.png',
							text: '头痛',
							type: 7
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/5.png',
							text: '昏迷',
							type: 8
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/1.png',
							text: '抽搐',
							type: 9
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/2.png',
							text: '出汗',
							type: 10
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/6.png',
							text: '饥饿',
							type: 11
						},
						{
							img: 'https://xcx.shuizhisu.com/public/static/img/nav/11.png',
							text: '心悸',
							type: 12
						},
					],
					// 当前状态高亮
					currentBloodStateIndex: -1,
			};
		},
		onLoad(option) {  
			option.info? this.info = JSON.parse(option.info): '' 
			option.info? this.scrollLeft = JSON.parse(option.info).value: ''   
		},
		// onShow() {
			
		// },
		onHide() {
			clearTimeout(_this.goToPreviousTime)
		},
		methods:{
			goToNewPage(){
				uni.navigateTo({
					url: '../recordnslist/index'
				})
			},
			previousPage(){
				uni.redirectTo({
					url: '../index'
				})
			},
			goToRecordnslist(){ 
				let _this = this  
				_this.$api.sendRequest({
					url: '/api/ua/rememberua',
					data: {
						// time: _this.addTime,
						// value: _this.value,
						// mark: _this.mark, 
						// type: _this.type
						time: _this.addTime,
						value: _this.value,
						mark: _this.mark,
						type: _this.type,
						timeType: _this.info.timeType
					},
					success: res => {  
						if(res.code >= 0){ 
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							clearTimeout(_this.goToPreviousTime)
							_this.goToPreviousTime = setTimeout(() => {
								uni.reLaunch({
									url: '../index'
								})
							},1000)
						}
					}
				}) 
			},
			goToStatis(){
				uni.redirectTo({
					url: '../statistics/index'
				})
			},
			// 时间段
			changeItem(type){
				this.info.timeType = type 
			},
			// 状态
			changeBlood(type){
				this.info.type = type
			},
			 scroll(val){ 
				 this.value = val
				 this.info.value = val
			 },
			 // 选中痛风状况
			 currentStatus(index,type){  
				// this.currentStatusItem = index
				this.info.type = type
			 },  
			 // 删除
			 deleteAddrecord(){
				 let _this = this
				 _this.$api.sendRequest({
					 url: '/api/ua/delete',
					 data:{id: _this.id},
					 success: res => { 
						 if(res.code >= 0){
							 uni.showToast({
							 	title: '删除成功',
								icon: 'none'
							 })
							 clearTimeout(_this.goToPreviousTime)
							 _this.goToPreviousTime = setTimeout(() => {
							 	uni.redirectTo({
							 		url: '../recordnslist/index'
							 	})
							 },1000)
						 }
					 }
				 })
			 },
			 // 更新数据
			 preservation(){
				 let _this = this
				 _this.$api.sendRequest({
					 url: '/api/ua/change',
					 data:{
						 id: _this.info.id,
						 time: _this.info.time,
						 value: _this.info.value,
						 timeType: this.info.timeType,
						 type: _this.info.type
					 },
					 success: res => {
						 if(res.code >= 0){ 
							 uni.showToast({
							 	title: '更新成功',
								icon: 'none'
							 })
							 clearTimeout(_this.goToPreviousTime)
							 _this.goToPreviousTime = setTimeout(() => {
							 	uni.redirectTo({
							 		url: '../recordnslist/index'
							 	})
							 },1000)
						 }
					 }
				 })
			 }
		}
	}
</script>

<style lang="less">
.addrecord_deta{
	overflow-x: hidden; 
	.add_rec{
		padding: 20rpx 200rpx;
		height: 400rpx;
		background-color: #01cc97;
		.rec_top{
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx; 
			& text:nth-child(1){
				position: relative;
				top: 50%;
				transform: translate(0,-50%);
				width: 50rpx;
				height: 50rpx;
				background-color: #fff;
				border-radius: 50%;
				&::before{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					content: '-';
					font-size: 40rpx;
					color: #01cb9b;
				}
			}
			& text:nth-child(2){
				flex: 1;
				color: #fff;
				text-align: center;
			}
			& text:nth-child(3){
				position: relative;
				top: 50%;
				transform: translate(0,-50%);
				width: 50rpx;
				height: 50rpx;
				background-color: #fff;
				border-radius: 50%;
				&::before{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					content: '+';
					font-size: 40rpx;
					color: #01cb9b;
				}
			}
			
		}
		.rec_con{
			margin: 20rpx 0;
			height: 160rpx;
			line-height: 160rpx;
			font-size: 60rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 10rpx;
		}
		.rec_con_dw{
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 36rpx;
			color: #fff;
		}
		.rec_con_bc{
			position: relative;
			top: -12rpx;
			right: 200rpx;
			width: 100vw;
			height: 80rpx;
			background-color: #999;
			opacity: .6;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
		}
	
	}
	.rec_img{ 
		margin: 20rpx 0 0 20rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.ruler{
		height: 160rpx; 
		position: relative;
		.is_scroll{
			position: absolute;
			width: 100%;
			height: 160rpx;
			top: 0;
		}
	}
	.blood_time {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 200rpx;
		background-color: #f8f8f8;
	
		.blood_time_item {
			margin-top: 10rpx;
			text-align: center;
			width: 23%;
			font-size: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}
	
		.current_blood_item {
			background-color: #ff8806;
			color: #fff;
		}
	}
	
	.blood_state {
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 360rpx;
		background-color: #fff;
	
		.blood_state_item {
			width: 15%;
			color: #bfbfbf;
			text-align: center;
	
			image {
				display: block;
				margin: 0 auto 10rpx auto;
				width: 80rpx;
				height: 80rpx;
			}
		}
	
		.current_blood_state {
			color: #ff8806;
		}
	}
	.measuring_time{
		margin-top: 32rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx; 
		background-color: #fff;
		.measuring_fl{
			color: #8a8a8a;
			line-height: 100rpx;
		} 
		.measuring_fr{
			line-height: 100rpx;
			.measuring_fr_img{
				position: relative;
				top: -6rpx;
				margin-left: 10rpx;
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
			}
		}
	}
	
	.rec_status{ 
		margin-top: 30rpx;
		padding: 20rpx; 
		background-color: #fff;
		.status_tit{
			display: block;
			height: 80rpx;
			font-size: 32rpx;
		}
		.status_con{  
			display: flex;
			justify-content: space-between; 
			height: 240rpx;
			.status_con_item{
				margin: 0 16rpx; 
				flex: 1;
				display: flex;
				text-align: center;
				flex-direction: column; 
				color: #999;
				.status_con_img{ 
					margin: 0 auto 20rpx auto;
					width: 80%;
					height: 100rpx;
				}
			} 
			.show_status_item{ 
				// background-color: #eee;
				text {
					color: #01cc97;
				}
			}
		}
	} 
	
	.addrecord_btn{
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		text-align: center; 
		text{
			flex: 1;
			color: #fff;
			line-height: 80rpx;
			background-color: #01cb9b;
			border: 2rpx solid #01cb9b;
			border-radius: 10rpx;
		}
		& text:nth-child(1){
			margin-right: 10rpx;
			background-color: #fff;
			color: #01cb9b;
		}
		& text:nth-child(2){
			margin-left: 10rpx;
		}
	}
	 
}
</style>
